<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <style>@import url("../assets/css/view.css");</style>
    <style>@import url("../assets/css/layui.css");</style> -->
    <link href="../assets/css/layui.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <script src="../vue.min.js"></script>
    <script src="../axios.min.js"></script>
    <script src="../jquery.js"></script>
    <title></title>
</head>
<body class="layui-view-body">
<div id="link">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">添加任务</div>

                <!-- <div class="layui-form-item">
                  <label class="layui-form-label">输入框</label>
                  <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div> -->
                <!-- <div class="layui-form-item">
                  <label class="layui-form-label">密码框</label>
                  <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div> -->
                <div class="layui-form-item">
                    <label class="layui-form-label">选择源链接</label>
                    <div class="layui-input-block">
                        <select v-model="sourcelinks" lay-verify="required" @change="getsourcedatabase($event)">
                            <option value="0">请选择</option>
                            <option v-for="u in sourcelinkList" :value="u.id">{{u.linkName}}</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">选择源数据库</label>
                    <div class="layui-input-block">
                        <select v-model="task.sourceDatabaseId" lay-verify="required" @change="getsourcetable($event)">
                            <option value="0">请选择</option>
                            <option v-for="u in sourcedatabaseList" :value="u.id">{{u.databaseName}}</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">选择源表名</label>
                    <div class="layui-input-block">
                        <select v-model="task.sourceTableName" lay-verify="required" @change="getsourcefiled($event)">
                            <option value="0">请选择</option>
                            <option v-for="u in sourcetableList" :value="u">{{u}}</option>
                        </select>
                    </div>
                </div>


                <!--  -->
                <div class="layui-form-item">
                    <label class="layui-form-label">选择字段名</label>
                    <div class="layui-input-block" v-model="task.fieldNamesArray" v-for="u in sourcefiledList">
                        <input type="checkbox" :value="u" @click="addField($event,u)">{{u}}
                    </div>

                    <div class="layui-input-block" v-for="(fieldName,index) in task.fieldNamesArray">
                        源字段:{{fieldName}}:
                        目标字段<select type="text" v-model="task.fields[index]">
                        <option value="0">请选择</option>
                        <option v-for="u in task.targetFiledList" :value="u">{{u}}</option>
                    </select>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-blue" @click="commitTask()">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>
<!-- <script src="../assets/layui.all.js"></script> -->
<!-- <script>
  var form = layui.form
    ,layer = layui.layer;
</script> -->
<script>
    new Vue({
        el: "#link",
        data: {
            sourcelinks: "0",
            sourcelinkList: [],
            sourcedatabaseList: [],
            sourcetableList: [],
            sourcefiledList: [],
            result1: null,


            task: {
                targetDatabaseId:'36',
                targetTableName:'core',
                submitName: '',
                sourceDatabaseId: '',
                sourceTableName: '',
                fieldNamesArray: [],
                fieldValue: [],
                fields: [],
                taskType:'1',
                coreFields:[]
            },


        },
        created() {
            this.getsourcelinks();
        },
        methods: {
            getsourcelinks: function () {//获取源链接
                var Authorization = localStorage.getItem('Authorization');
                axios.get("http://localhost:9005/dba/dbaController/getLinkName",{headers: {'Authorization': Authorization}}).then(response => {
                    this.sourcelinkList = response.data.data;
                })
            },

            getsourcedatabase: function () {//获取链接下数据库
                var Authorization = localStorage.getItem('Authorization');
                axios.get("http://localhost:9005/dba/dbaController/getDatabaseByLinkId/" + this.sourcelinks,{headers: {'Authorization': Authorization}}).then(response => {
                    this.sourcedatabaseList = response.data.data;
                })
            },

            getsourcetable: function () {//获取链接下的表
                var Authorization = localStorage.getItem('Authorization');
                axios.get("http://localhost:9005/dba/dbaController/getTablesByDatabaseId/" + this.task.sourceDatabaseId,{headers: {'Authorization': Authorization}}).then(response => {
                    this.sourcetableList = response.data.data;
                })
            },

            getsourcefiled: function () {//获取表下的字段
                var Authorization = localStorage.getItem('Authorization');
                axios.get("http://localhost:9005/dba/dbaController/getfieldNamesByDatabaseNameAndTableName/" + this.task.sourceDatabaseId + "/" + this.task.sourceTableName,{headers: {'Authorization': Authorization}}).then(response => {
                    this.sourcefiledList = response.data.data;
                })
            },
            addField: function ($event, u) {
                if ($event.target.checked) {//如果是被选中,则增加到数组
                    this.task.fieldNamesArray.push(u);
                    // this.fields.u = '';

                } else {

                    var idx = this.task.fieldNamesArray.indexOf(u);
                    this.task.fieldNamesArray.splice(idx, 1);//删除
                }
            },

            gettargetField:function(){
                var Authorization = localStorage.getItem('Authorization');

                axios.get("http://localhost:9005/dba/dbaController/getfieldNamesByDatabaseNameAndTableName/" + this.task.targetDatabaseId + "/" + this.task.targetTableName, {headers: {'Authorization': Authorization}}).then(response => {
                    this.task.targetFiledList = response.data.data;
                })
            },


            commitTask: function () {//添加任务
                var Authorization = localStorage.getItem('Authorization');
                var yyy="";
                for (i=0;i<this.task.fieldNamesArray.length;i++){
                    yyy+=this.task.fieldNamesArray[i] + ":" + this.task.fields[i]+",";

                }
                this.task.coreFields=yyy.substring(0,yyy.length-1);
                this.task.submitName = localStorage.getItem('username');
                 axios.post("http://localhost:9005/dba/dbaController/commitCore",this.task,{headers: {'Authorization': Authorization}}).then(response => {
                location.href="qianyi.html";
                   })
            },

        }


    })


</script>
</body>
</html>